<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../../vue.js"></script>
 </head>
<body>
    <div id="app">
         <!-- 
        v-bind可以使用动态的style控制元素的样式
        动态的style可以接受一个对象,对象的key就是style的属性,对象的值就是style的值,对象的值可以使用插值来进行实现
        
       -->
        <div :style="{background:isActive?'red':'green',border:isHover?'1px solid #111':''}">案例1</div>
         <!-- 
        动态类style可以接受一个数组,数组中可以包含多个动态类对象
       -->
        <div :style="[{background:isActive?'red':'green'},{border:isHover?'1px solid #111':''}]">案例2</div>
        <div :style="[style1,style2]">案例3</div>
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            data() {
                return {
                    isActive:true,
                    isHover:true,
                    style1:{background:'yellow'},
                    style2:{border:'1px solid #000'}

                }
            },
        })
    </script>
</body>
</html>